<template>
  <page-wrap
    title="职业测评"
    ref="pageWrap"
    hideTab
    back
    :showTop="false"
    :dark="true"
    hideSafeArea
    :bg-color="uNavColor"
  >
    <view class="allContainer" :style="[{ position: 'relative' }]">
      <view
        :style="[
          { position: 'fixed' },
          { zIndex: '900' },
          { width: '750rpx' },
          { backgroundColor: tabsListBgColor }
        ]"
      >
        <view :style="[{ width: '100%' }, { height: '180rpx' }]"></view>
        <u-tabs
          class="tabsList"
          :current="currentIndex"
          name="tagName"
          :list="tabList"
          @change="handleChangeTabs"
          height="55"
          :active-item-style="activeItemStyle"
          :bg-color="transform"
          :gutter="24"
          :bar-style="barStyle"
          font-size="28"
          :inactive-color="'#75957f'"
        ></u-tabs>
      </view>

      <image
        :src="coverImgUrl"
        :style="[{ width: '750rpx' }, { height: '1287rpx' }]"
      />

      <scroll-view class="baseBgBox" :scroll-y="true" :overflow-x="false">
        <!-- 个性特征描述  -->
        <PersonFeature
          class="PersonFeature"
          :personalityTraits="personalityTraits"
          @listenRect="listenRect"
        />
        <!-- 个人盲点  -->
        <PersonBlindSpot
          class="PersonBlindSpot"
          :personalBlindSpots="personalBlindSpots"
          @listenRect="listenRect"
        />
        <!-- 工作优势  -->
        <WorkAdvantage
          class="WorkAdvantage"
          :workAdvantages="workAdvantages"
          @listenRect="listenRect"
        />
        <!-- 工作劣势 -->
        <WorkInferiority
          class="WorkInferiority"
          :workDisadvantages="workDisadvantages"
          @listenRect="listenRect"
        />
        <!-- 职业类型-你适合的职业 -->
        <OccupationType
          class="OccupationType"
          :careerCategory="careerCategory"
          @listenRect="listenRect"
        />
        <!--    功能运用     -->

        <!-- 问题解决方式  改为六维属性分析-->
        <QuestionSolve
          class="QuestionSolve"
          :problemSolving="problemSolving"
          :protectorName="protectorName"
          :maxScoreDimension="maxScoreDimension"
          :minScoreDimension="minScoreDimension"
          :radarChart="radarChart"
          @listenRect="listenRect"
        />
        <!-- 个人发展建议 -->
        <PersonDevelop
          class="PersonDevelop"
          :developmentAdvice="developmentAdvice"
          @listenRect="listenRect"
        />
        <!-- 职业报告  -->
        <CareerBook
          v-if="fromWhere == 'careerPath'"
          class="CareerBook"
          :careerNames="careerNames"
          :protectorName="protectorName"
          @listenRect="listenRect"
          :personId="personId"
        />

        <image
          src="https://img3.job1001.com/ypMp/elan/images/career/careerAssessResult/bg_end.png"
          :style="[{ width: '750rpx' }, { height: '260rpx' }]"
        />
      </scroll-view>
    </view>
  </page-wrap>
</template>

<script>
import PersonFeature from './PersonFeature.vue';
import PersonBlindSpot from './PersonBlindSpot.vue';
import WorkAdvantage from './WorkAdvantage.vue';
import WorkInferiority from './WorkInferiority.vue';
import OccupationType from './OccupationType.vue';

import QuestionSolve from './QuestionSolve.vue';
import PersonDevelop from './PersonDevelop.vue';
import CareerBook from './CareerBook.vue';

import { showDelayToastTip, getDivineBeastCover } from '@/utils/handle';
import { careerAssessRegularInfo } from '@/utils/data';
export default {
  components: {
    PersonFeature,
    PersonBlindSpot,
    WorkAdvantage,
    WorkInferiority,
    OccupationType,

    QuestionSolve,
    PersonDevelop,
    CareerBook
  },
  props: {
    scrollRes: {
      type: Object,
      default: function () {
        return {};
      }
    },
    resultInfo: {
      type: Object,
      default: function () {
        return {};
      }
    },
    fromWhere: {
      type: String,
      default: ''
    },
    toBook: {
      type: String,
      default: 'false'
    },
    personId: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      isBlur: true,
      screenWidth: 0,
      screenHeight: 0,
      uNavColor: 'transparent',
      tabsListBgColor: 'transparent',
      currentIndex: 0,
      scrollDomId: '',
      showTop: false,

      activeItemStyle: careerAssessRegularInfo.activeItemStyle,
      barStyle: careerAssessRegularInfo.barStyle,
      payStatus: 0, // 是否解锁 1-已经解锁 0-未解锁

      coverImgUrl: careerAssessRegularInfo.coverImgUrl,

      tabList: careerAssessRegularInfo.tabList,

      barTopDistance: careerAssessRegularInfo.barTopDistance,

      partHeightPxList: careerAssessRegularInfo.partHeightPxList,

      // 是否是通过点击切换模块
      isChangeTabByClick: false,
      currentScrollTop: 0,

      personalityTraits: [],
      personalBlindSpots: {},
      workAdvantages: {},
      workDisadvantages: {},
      careerCategory: {},
      features: {},
      problemSolving: {},
      developmentAdvice: {},
      protectorName: '',
      maxScoreDimension: {},
      minScoreDimension: {},
      radarChart: [],
      careerNames: []
    };
  },

  watch: {
    resultInfo: {
      handler(val) {
        console.log('val', val);
        this.personalityTraits = val.personalityTraits;
        this.personalBlindSpots = val.personalBlindSpots;
        this.workAdvantages = val.workAdvantages;
        this.workDisadvantages = val.workDisadvantages;
        this.careerCategory = val.careerCategory;
        this.features = val.features;
        this.problemSolving = val.problemSolving;
        this.developmentAdvice = val.developmentAdvice;
        this.careerNames = val.careerCategory.descList;
        this.protectorName = val.protectorName;
        this.maxScoreDimension = val.maxScoreDimension;
        this.minScoreDimension = val.minScoreDimension;
        this.radarChart = val.radarChart;
        this.coverImgUrl = getDivineBeastCover(val.dataType);
      },
      deep: true, // 深度监听
      immediate: true // 初始化的时候立刻执行一次
    },

    scrollRes: {
      handler(val) {
        this.onThisPageScroll(val);
      },
      deep: true, // 深度监听
      immediate: true // 初始化的时候立刻执行一次
    },

    fromWhere: {
      handler(val) {
        console.log(this.tabList, 'this.tabList-----');
        if (val == 'careerPath') {
          const temp = this.tabList.find((item) => item.name == '职业报告');
          if (!temp) {
            this.tabList.push({ name: '职业报告' });
          }
        }
      },
      immediate: true
    },
    toBook: {
      handler(val) {
        if (val == 'true') {
          this.handleChangeTabs(7);
          this.$nextTick(() => {
            uni.pageScrollTo({
              scrollTop: 99999,
              duration: 0
            });
          });
        }
      },
      immediate: true
    }
  },
  onReady() {
    let systemInfo = uni.getSystemInfoSync();
    this.screenWidth = systemInfo.windowWidth;
    this.screenHeight = systemInfo.windowHeight;
  },
  created() {
    //this.reqGetCareerAssessmentData();
  },
  mounted() {},

  destroyed() {
    // 清除职业报告，以解决从职业测评进来也有“职业报告”的数据残留
    const index = this.tabList.findIndex((item) => item.name == '职业报告');
    if (index >= 0) {
      this.tabList.splice(index, 1);
      console.log(this.tabList, 'this.tabList======');
    }
  },

  methods: {
    handleToBook() {},

    listenRect(rect, index) {
      console.log('rect.height = ' + rect.height + ', index = ' + index);
      this.partHeightPxList[index] = rect.height;
    },

    onThisPageScroll(res) {
      this.currentScrollTop = res.scrollTop;

      if (res.scrollTop > 0) {
        this.uNavColor = '#ffffff';
        this.tabsListBgColor = '#ccdec1';
      } else {
        this.uNavColor = 'transparent';
        this.tabsListBgColor = 'transparent';
      }
      this.calculateScrollDistanceByScrollTop();
      this.isChangeTabByClick = false;
    },

    calculateScrollDistanceByScrollTop() {
      if (this.isChangeTabByClick) {
        return;
      }
      var distance = 0;
      for (var i = 0; i < 9; i++) {
        distance += this.partHeightPxList[i];
        if (this.currentScrollTop < distance - this.barTopDistance) {
          if (i <= 1) {
            this.currentIndex = 0;
            return;
          }
          // this.currentIndex = i - 1; // 不用 - 1，要不然最后一个一直不能选中
          this.currentIndex = i;
          return;
        }
      }
    },

    calculateScrollDistance(index) {
      if (index == 0) {
        return this.partHeightPxList[0];
      }
      var result = 0;
      for (var i = 0; i <= index; i++) {
        result += this.partHeightPxList[i];
      }
      // if (index == 4) {
      //   result += uni.upx2px(100);
      // }
      // if (index == 6) {
      //   result += uni.upx2px(100);
      // }
      return result;
    },

    handleChangeTabs(index) {
      console.log('index = ' + index);
      this.currentIndex = index;
      this.isChangeTabByClick = true;
      console.log(
        '点击',
        this.calculateScrollDistance(index),
        this.barTopDistance
      );
      uni.pageScrollTo({
        scrollTop: this.calculateScrollDistance(index) - this.barTopDistance,
        duration: 0
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.allContainer {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.baseBgBox {
  width: 100%;
  //height: 8990rpx;
  background-size: 100% 100%;
  background-image: url($img-base + 'career/careerAssessResult/base_bg.png');
  background-repeat: no-repeat;
  //background: #d4dcc5;
  // margin-top: -120px;
}
</style>
